<template>
  <view class="box">
    <view class="language">
      <view class="lan_item" v-for="(item, index) in lanList" :key="index"
        :class="langIndex == item.value ? 'lan_item_active' : ''" @click="langIndexse(item.value)">
        <image class="lang_img" :src="item.image" mode="widthFix"></image>
        <view class="text">
          {{ item.label }}
        </view>
      </view>
    </view>
    <view class="goto" @click="goToView">
      <uv-icon :name="langIndex == 1 ? 'arrow-leftward' : 'arrow-rightward'" size="30" color="#fff"></uv-icon>
    </view>
  </view>

</template>
<script setup>
import eImg from '@/static/images/e.png'
import aImg from '@/static/images/a.png'
import {
  onMounted,
  reactive,
  ref
} from "vue";
import {
  useDeviceStore
} from "@/store/modules/device"
import {
  useI18n
} from 'vue-i18n';
import {
  useLanguageSwitcher
} from "@/locale/setLang";

const {
  switchLang
} = useLanguageSwitcher()
const {
  t
} = useI18n();
const device = useDeviceStore()
console.log(device.device.lang)
const langSelect = {
  0: "en-US",
  1: "Arab"
}

const langIndex = ref(0)
const lanList = [
  {
    label: 'English',
    value: 0,
    image: eImg
  },
  {
    label: 'بالعربية',
    value: 1,
    image: aImg
  },
]
const goToView = () => {
  // uni.switchTab({
  // 	url:"/pages/index/index"
  // })
  switchLang(langSelect[langIndex.value])
  uni.navigateTo({
    url: "/pages/login/login"
  })
}
const langIndexse = (index) => {
  langIndex.value = index
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #114a41;

  .language {
    display: flex;
    transform: translateY(-100%);

    .lan_item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      color: #fff;
      border: 1px solid transparent;
      margin: 0 20px;
      padding: 10px;

      .lang_img {
        width: 200rpx;

      }

      .text {
        margin-top: 40rpx;
        text-align: center;
      }
    }

    .lan_item_active {
      border: 1px solid #fff;
      border-radius: 10rpx;
    }
  }

  .goto {
    width: 100rpx;
    height: 100rpx;
    background: #a99f74;
    border-radius: 190rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>